<template>
  <div class="app-container">
    <!-- 左侧流星容器 -->
    <div class="side-container left-side">
      <div class="meteor-container">
        <div v-for="(meteor, index) in meteors" :key="index" class="meteor" :style="meteorStyle(meteor)"></div>
      </div>
    </div>

    <!-- 中间内容容器 -->
    <div class="middle-container">
      <div class="navbar">
        <div class="nav-item" :class="{ active: activeNav === 'home' }" @click="setActiveNav('home')">首页</div>
        <div class="nav-item" :class="{ active: activeNav === 'taiyuanBranch' }" @click="setActiveNav('taiyuanBranch')">太原分舵</div>
        <div class="nav-item" :class="{ active: activeNav === 'onlineEvents' }" @click="setActiveNav('onlineEvents')">线上活动</div>
        <div class="nav-item" :class="{ active: activeNav === 'localMeetups' }" @click="setActiveNav('localMeetups')">同城聚会</div>
        <div class="nav-item" :class="{ active: activeNav === 'outdoorSports' }" @click="setActiveNav('outdoorSports')">户外运动</div>
      </div>

      <div class="comment-section">
        <div class="background-image-container">
          <img :src="carouselImage" class="background-image">
        </div>
      </div>

      <div class="comment-container">
        <div class="header">
          <h2>最新话题</h2>
          <div class="filter">
            <span :class="{ active: filter === 'topic' }" @click="setFilter('topic')">话题</span>
            <span :class="{ active: filter === 'group' }" @click="setFilter('group')">小组</span>
            <span :class="{ active: filter === 'author' }" @click="setFilter('author')">作者</span>
          </div>
        </div>

        <div class="comment-list">
          <div v-for="(topic, index) in filteredTopics" :key="index" class="topic-item">
            <div class="main-content">
              <h3 class="title">{{ topic.title }}</h3>
              <div class="meta">
                <span class="group">{{ topic.group }}</span>
                <span class="author">{{ topic.author }}</span>
              </div>
            </div>
            <div class="stats">
              <div class="reply-count">
                {{ topic.replies }}/{{ topic.views }}
              </div>
              <div class="time">
                {{ topic.lastReply }}
              </div>
              <div class="like-section">
                <el-button type="text" @click="likeTopic(index)">点赞 {{ topic.likes }}</el-button>
              </div>
            </div>

            <div class="comment-input">
              <el-input
                  v-model="topic.newComment"
                  placeholder="请输入您的评论"
                  clearable
                  class="custom-input"
              >
                <template #append>
                  <el-button type="primary" @click="addComment(index)" class="custom-button">发表评论</el-button>
                </template>
              </el-input>
            </div>

            <div class="comments-section">
              <div v-if="topic.comments && topic.comments.length === 0" class="no-comments">暂无评论</div>
              <div v-for="(comment, commentIndex) in topic.comments" :key="commentIndex" class="comment-card">
                <p class="comment-text">{{ comment.text }}</p>
                <span class="comment-date">{{ comment.date }}</span>
                <div class="comment-actions">
                  <el-button type="text" @click="likeComment(index, commentIndex)">点赞 {{ comment.likes }}</el-button>
                  <el-button type="text" @click="deleteComment(index, commentIndex)">删除</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧流星容器 -->
    <div class="side-container right-side">
      <div class="meteor-container">
        <div v-for="(meteor, index) in meteors" :key="index" class="meteor" :style="meteorStyle(meteor)"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 流星数据
      meteors: [],
      meteorInterval: null,

      // 原有数据
      activeNav: 'home',
      topics: [
        {
          title: '最美的十九岁',
          group: '旅行..',
          author: '中山',
          replies: 3,
          views: 2025,
          lastReply: '01-15 03:38',
          comments: [
            {
              text: '我们的歌',
              date: '01-13 13:38',
              likes: 20
            }
          ],
          likes: 20,
          newComment: ''
        },
        {
          title: '威达神镜1号70-2...',
          group: '我爱手动头',
          author: '马斯车尘',
          replies: 4,
          views: 2025,
          lastReply: '01-11 11:58',
          comments: [],
          likes: 0,
          newComment: ''
        },
        {
          title: '带着孩子游三亚',
          group: '杂谈',
          author: '大卫林',
          replies: 4,
          views: 2025,
          lastReply: '12-29 16:21',
          comments: [],
          likes: 0,
          newComment: ''
        }
      ],
      filter: 'topic',
      carouselImage: process.env.VUE_APP_CAROUSEL_IMAGE_PATH || '/imgs/3.jpg'
    };
  },
  computed: {
    filteredTopics() {
      if (this.filter === 'topic') return this.topics;
      if (this.filter === 'group') return this.topics.sort((a, b) => a.group.localeCompare(b.group));
      if (this.filter === 'author') return this.topics.sort((a, b) => a.author.localeCompare(b.author));
      return this.topics;
    }
  },
  mounted() {
    this.startMeteorEffect();
  },
  beforeUnmount() {
    this.stopMeteorEffect();
  },
  methods: {
    // 流星方法
    createMeteor() {
      return {
        x: Math.random() < 0.5 ? 0 : 100,
        y: -20,
        angle: Math.random() * 30 + 75,
        speed: Math.random() * 3 + 2,
        length: Math.random() * 50 + 30,
        opacity: Math.random() * 0.5 + 0.5
      };
    },
    updateMeteors() {
      this.meteors = this.meteors.filter(meteor => meteor.y < window.innerHeight + 100);
      if (this.meteors.length < 20) { // 增加最大数量为20
        this.meteors.push(this.createMeteor());
      }
      this.meteors = this.meteors.map(meteor => ({
        ...meteor,
        y: meteor.y + meteor.speed,
        x: meteor.x + Math.cos(meteor.angle * Math.PI/180) * meteor.speed
      }));
    },
    meteorStyle(meteor) {
      return {
        left: `${meteor.x}%`,
        top: `${meteor.y}px`,
        width: `${meteor.length}px`,
        opacity: meteor.opacity,
        transform: `rotate(${meteor.angle}deg)`
      };
    },
    startMeteorEffect() {
      this.meteorInterval = setInterval(this.updateMeteors, 30); // 减少时间间隔
    },
    stopMeteorEffect() {
      clearInterval(this.meteorInterval);
    },

    // 原有方法
    addComment(topicIndex) {
      try {
        const topic = this.topics[topicIndex];
        if (!topic.newComment.trim()) {
          alert("评论内容不能为空");
          return;
        }
        const comment = {
          text: this.escapeHtml(topic.newComment),
          date: new Date().toLocaleString(),
          likes: 0
        };
        topic.comments.push(comment);
        topic.replies++;
        topic.newComment = '';
      } catch (error) {
        console.error("添加评论失败:", error);
      }
    },
    escapeHtml(unsafe) {
      return unsafe
          .replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
          .replace(/"/g, "&quot;")
          .replace(/'/g, "&#039;");
    },
    isValidIndex(topicIndex, commentIndex) {
      return topicIndex >= 0 && topicIndex < this.topics.length &&
          commentIndex >= 0 && commentIndex < this.topics[topicIndex].comments.length;
    },
    likeComment(topicIndex, commentIndex) {
      if (this.isValidIndex(topicIndex, commentIndex)) {
        this.topics[topicIndex].comments[commentIndex].likes++;
      } else {
        throw new Error("无效的评论索引");
      }
    },
    deleteComment(topicIndex, commentIndex) {
      if (confirm("确定要删除这条评论吗？")) {
        if (this.isValidIndex(topicIndex, commentIndex)) {
          this.topics[topicIndex].comments.splice(commentIndex, 1);
          this.topics[topicIndex].replies--;
        } else {
          throw new Error("无效的评论索引");
        }
      }
    },
    likeTopic(topicIndex) {
      if (topicIndex >= 0 && topicIndex < this.topics.length) {
        this.topics[topicIndex].likes++;
      } else {
        throw new Error("无效的话题索引");
      }
    },
    setFilter(filter) {
      this.filter = filter;
    },
    setActiveNav(nav) {
      this.activeNav = nav;
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
.app-container {
  background-color: #000;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
}

/* 流星样式 */
.side-container {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.left-side {
  left: 0;
}

.right-side {
  right: 0;
}

.meteor-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.meteor {
  position: absolute;
  height: 2px;
  background: linear-gradient(-90deg, rgba(255,255,255,1), rgba(255,255,255,0));
  filter: drop-shadow(0 0 6px white);
  animation: meteor-trail 2.5s linear infinite;
}

@keyframes meteor-trail {
  0% {
    opacity: 1;
    transform: rotate(15deg) translateX(0);
  }
  100% {
    opacity: 0;
    transform: rotate(15deg) translateX(1000px);
  }
}

/* 导航栏 */
.navbar {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  border-radius: 10px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  background-color: #87CEEB !important; /* 天蓝色 */
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-item {
  padding: 10px 20px;
  cursor: pointer;
  color: white;
  transition: background-color 0.3s ease;
}

.nav-item:hover {
  background-color: #6495ED;
}

.nav-item.active {
  background-color: #4682B4;
  font-weight: bold;
}

/* 背景图容器 */
.comment-section {
  position: relative;
  z-index: 1;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #fff; /* 白色背景 */
}

   /* 修改图片容器样式 */
 .background-image-container {
   width: 800px;
   margin: 0 auto;
   display: block;
   overflow: hidden; /* 确保放大时不溢出 */
   border-radius: 10px;
   position: relative;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

.background-image {
  width: 100%;
  height: auto;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center; /* 从中心开始缩放 */
  display: block;
}

/* 悬停放大效果 */
.background-image-container:hover .background-image {
  transform: scale(1.05); /* 放大5% */
  cursor: zoom-in;
}

/* 添加悬停遮罩效果 */
.background-image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.background-image-container:hover::after {
  opacity: 1;
}

/* 优化过渡动画 */
.comment-section {
  padding: 20px 0; /* 增加垂直间距 */
  margin-bottom: 30px;
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.3)
  ); /* 渐变背景 */
  backdrop-filter: blur(5px); /* 毛玻璃效果 */
  border-radius: 15px;
}



/* 评论容器 */
.comment-container {
  position: relative;
  z-index: 1;
  width: 83%;
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  background-color: #f0f8ff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 其他原有样式保持不变 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 10px;
}

.filter span {
  margin-left: 20px;
  padding: 5px 10px;
  cursor: pointer;
}

.filter .active {
  color: #ff6600;
  border-bottom: 2px solid #ff6600;
}

.topic-item {
  display: flex;
  flex-direction: column;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.title {
  color: #333;
  margin: 0 0 8px 0;
  font-size: 16px;
}

.meta {
  color: #999;
  font-size: 12px;
}

.meta span {
  margin-right: 15px;
}

.stats {
  text-align: right;
  min-width: 120px;
}

.reply-count {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.time {
  color: #999;
  font-size: 12px;
}

.group {
  color: #ff6600;
}

.no-comments {
  margin-top: 10px;
  color: #999;
  font-size: 14px;
}

.comments-section {
  margin-top: 10px;
}

.comment-card {
  margin-bottom: 10px;
  padding: 10px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.like-section {
  margin-top: 10px;
}

.comment-input {
  margin-top: 10px;
}

.custom-input .el-input__inner {
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  width: 600px;
}

.custom-input .el-input-group__append {
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-button {
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 中间容器样式 */
.middle-container {
  position: relative;
  z-index: 1;
  width: 50%;
  background-color: #fff; /* 白色背景 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  margin: 0 auto;
}
</style>
